// 组件: zj-checkbox 多选框
// ==================== 参数 ====================
// ※ value ==> 当前值(双向绑定)
// ※ model ==> 双向绑定时父组件的键名
// ※ valTrue ==> 自定义选中值 (默认: true)
// ※ valFalse ==> 自定义未选中值 (默认: false)
// ※ color ==> 未选中色 (默认: '#bbb')
// ※ colorSelected ==> 选中色 (默认: '#6b9cd4')
// ※ disabled ==> 是否禁用 (默认: false)
// ※ click ==> 是否自定义点击事件 (默认: false)
// ==================== 事件 ====================
// ※ bind:model="model(e)" ==> 双向绑定
// ※ bind:change="change(e)" ==> 值改变时触发
// ※ bind:click="click(e)" ==> 点击时触发
// ==================== 插槽 slot ====================
// ※ 默认插槽 ==> xxxxx
// ==================== 方法 ====================
// ※ xxxxx ==> xxxxx

Component({
  properties: {
    value: { // 当前值(双向绑定)
      type: Boolean,
      optionalTypes: [String, Number, Boolean],
      value: false
    },
    model: { // 双向绑定时父组件的键名
      type: String
    },
    valTrue: { // 自定义选中值
      type: Boolean,
      optionalTypes: [String, Number, Boolean],
      value: true
    },
    valFalse: { // 自定义未选中值
      type: Boolean,
      optionalTypes: [String, Number, Boolean],
      value: false
    },
    color: { // 未选中色
      type: String,
      value: ''
    },
    colorSelected: { // 选中色
      type: String,
      value: ''
    },
    disabled: { // 是否禁用
      type: Boolean,
      optionalTypes: [String, Number, Boolean]
    },
    click: { // 是否自定义点击事件
      type: Boolean,
      optionalTypes: [String, Number, Boolean]
    }
  },
  data: {
    value_child: false, // 当前值(双向绑定)
    valTrue_child: true, // 自定义选中值
    valFalse_child: false, // 自定义未选中值
  },
  observers: {
    // ========== 监听自定义选中值 ==========
    // 注: 用于应对properties里的type
    'valTrue': function (valTrue) { this.setData({ valTrue_child: valTrue }) },
    'valFalse': function (valFalse) { this.setData({ valFalse_child: valFalse }) },
    // ========== 监听'value', 双向绑定 ==========
    'value': function (value) {
      const valTrue_child = this.data.valTrue_child
      const valFalse_child = this.data.valFalse_child
      const val = value === valTrue_child ? valTrue_child : valFalse_child
      if (val !== this.data.value_child) {
        this.setData({ value_child: val })
      }
    },
    'value_child': function (value_child) {
      const e = {
        value: value_child,
        model: this.properties.model
      }
      this.triggerEvent('model', e)
      this.triggerEvent('change', e)
    }
  },
  methods: {
    // ========== 触摸事件 ==========
    tap (e) {
      if (this.properties.disabled) return // 禁用
      if (this.properties.click) { // 自定义点击事件
        this.triggerEvent('click', e)
        return
      }
      const valTrue_child = this.data.valTrue_child
      const valFalse_child = this.data.valFalse_child
      const value_child = this.data.value_child === valTrue_child ? valFalse_child : valTrue_child
      this.setData({ value_child })
    }
  }
})
